<script setup>
import { onMounted, ref, watch} from 'vue'
import * as dayjs from 'dayjs'
import axios from 'axios'

const input = ref('')
const list = ref([])
const fetchList = async() => {
  const res = input.value > 10 ? 10 : input.value
  const { data } = await axios.get(`https://randomuser.me/api/?results=${res || 5}`)
  list.value = data.results
}
onMounted(() => {
  fetchList()
})
watch([input], (newValue, oldValue) => {
  console.log(newValue)
})
</script>

<template>
  <div class="test">
    <el-input v-model="input" placeholder="input number between 1 to 10" type="number">
      <template #append>
        <el-button type="primary" @click="fetchList">vue3 fetch {{ dayjs().format('YYYY-MM-DD HH:mm:ss')}}</el-button>
      </template>
    </el-input>
    <ul>
      <li v-for="obj in list">{{ obj.email}}</li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.test {}
</style>